<template>
  <div id="app">
    <!-- NavBar区域 -->
    <van-nav-bar v-if="isHome" title="黑马优购" />
    <van-nav-bar v-else title="黑马优购">
      <div class="left_arrow" @click="()=>{ $router.go(-1) }" slot="left">
        <van-icon name="arrow-left" />
        <span>返回</span>
      </div>
    </van-nav-bar>
    <!-- 内容 -->
    <router-view />
    <!-- 底部导航 -->
    <van-tabbar v-model="active" route active-color="#d81e06">
      <van-tabbar-item to="/home">
        <span>首页</span>
        <!-- #icon="props" -->
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? icon.home_a : icon.home_n" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/cates">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? icon.cates_a : icon.cates_n" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/search">
        <span>搜索</span>
        <template #icon="props">
          <img :src="props.active ? icon.search_a : icon.search_n" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item badge="3" to="/cart">
        <span>购物车</span>
        <template #icon="props">
          <img :src="props.active ? icon.cart_a : icon.cart_n" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/my">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.my_a : icon.my_n" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        active: 0,
        icon: {
          home_n: "icons/home.png",
          home_a: "icons/home-active.png",
          cates_n: "icons/cates.png",
          cates_a: "icons/cates-active.png",
          search_n: "icons/search.png",
          search_a: "icons/search-active.png",
          cart_n: "icons/cart.png",
          cart_a: "icons/cart-active.png",
          my_n: "icons/my.png",
          my_a: "icons/my-active.png"
        },
      };
    },
    computed: {
      isHome: function () {
        if (this.$route.path == "/" || this.$route.path == "/home") {
          return true
        } else {
          return false
        }
      }
    }
  }
</script>

<style lang="less">
</style>